import 'package:flutter/material.dart';
import 'package:cesi/components/button.dart';
import 'package:cesi/pages/menu_page.dart';
import 'package:cesi/pages/test.dart'; // 添加这行导入
import 'package:cesi/theme/color.dart';

class WelcomePage extends StatelessWidget {
  const WelcomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.cream,
      body: SafeArea(
        child: Stack(
          // 使用 Stack 来叠加调试按钮
          children: [
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    AppColors.cream,
                    Color(0xFFF5E6D3),
                    AppColors.lightBrown,
                  ],
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Logo
                  Container(
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: AppColors.primaryBrown.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Image.asset("assets/images/logo.png", scale: 1),
                  ),

                  const SizedBox(height: 30),

                  // 咖啡图片
                  Container(
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: AppColors.primaryBrown.withOpacity(0.3),
                          blurRadius: 15,
                          offset: const Offset(0, 5),
                        ),
                      ],
                    ),
                    child: Image.asset(
                      "assets/images/coffee.png",
                      width: 220,
                      height: 220,
                    ),
                  ),

                  const SizedBox(height: 30),

                  // 主标题
                  const Text(
                    "找寻你最喜爱的",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.w600,
                      color: AppColors.textDark,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    "咖啡味道!",
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: AppColors.primaryBrown,
                    ),
                  ),

                  const SizedBox(height: 25),

                  // 描述文字
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 40),
                    child: Text(
                      "这里是咖啡、啤酒与美酒的聚集地\n也是精彩表演艺术的舞台空间！",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 16,
                        color: AppColors.textLight,
                        height: 1.5,
                      ),
                    ),
                  ),

                  const SizedBox(height: 40),

                  // 主要按钮
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 50),
                    child: MyButton(
                      text: "开始探索吧!",
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const MenuPage(),
                          ),
                        );
                      },
                      backgroundColor: AppColors.primaryBrown,
                      textColor: Colors.white,
                    ),
                  ),

                  const SizedBox(height: 20),

                  // 装饰小圆点
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      _buildDecorationDot(AppColors.primaryBrown),
                      _buildDecorationDot(AppColors.caramel),
                      _buildDecorationDot(AppColors.mediumBrown),
                    ],
                  ),
                ],
              ),
            ),

            // 调试按钮 - 放在右下角
            Positioned(
              bottom: 20,
              right: 20,
              child: GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => TestPage()),
                  );
                },
                child: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(color: Colors.grey.withOpacity(0.5)),
                  ),
                  child: Icon(
                    Icons.bug_report,
                    color: Colors.grey[600],
                    size: 24,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 装饰小圆点方法
  Widget _buildDecorationDot(Color color) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 4),
      width: 8,
      height: 8,
      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
    );
  }
}
